﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>FooTable - jQuery plugin for responsive HTML tables</title>
  <meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
  
  <link href="css/footable-0.1.css" rel="stylesheet" type="text/css" />
  <link href="css/footable.sortable-0.1.css" rel="stylesheet" type="text/css" />
  <link href="css/footable.paginate.css" rel="stylesheet" type="text/css" />
  <link href="bootstrap/bootstrap.css" rel="stylesheet" type="text/css" />
  <link href="bootstrap/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  <link href="bootstrap/bootstrapSwitch.css" rel="stylesheet" type="text/css" />
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  <script src="js/footable.js" type="text/javascript"></script>
  <script src="js/footable.sortable.js" type="text/javascript"></script>
  <script src="js/footable.filter.js" type="text/javascript"></script>
  <script src="js/footable.paginate.js" type="text/javascript"></script>
  <script src="bootstrap/bootstrapSwitch.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('table').footable();
    });
  </script>
</head>
  <body>
    search:<input id="filter" type="text" /> e.g. jun, elec, 1981
    <table data-filter="#filter" class="footable" data-page-size="5">
      <thead>
        <tr>
          <th data-class="expand" data-sort-initial="true">
            First Name
          </th>
          <th>
            Last Name
          </th>
          <th data-hide="phone,tablet">
            Job Title
          </th>
          <th data-hide="phone,tablet" data-type="numeric">
            DOB
          </th>
          <th data-hide="phone">
            Status
          </th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Isidra</td><td><a target="_blank" href="http://www.google.com">Boudreaux</a></td><td>Traffic Court Referee</td><td data-value="78025368997">22 Jun 1972</td><td>
                <div class="switch switch-mini">
                    <input type="checkbox">
                </div>
            </td></tr>
        <tr><td>Maria</td><td>Nicley</td><td>Meat Packager</td><td data-value="-100297281571">28 Oct 1966</td><td>
                <div class="switch switch-mini">
                    <input type="checkbox">
                </div>
            </td></tr>
        <tr><td>Shona</td><td>Woldt</td><td><a target="_blank" href="http://www.google.com">Airline Transport Pilot</a></td><td data-value="370961043292">3 Oct 1981</td><td>
                <div class="switch switch-mini">
                    <input type="checkbox">
                </div>
            </td></tr>
        <tr><td>Granville</td><td>Leonardo</td><td>Business Services Sales Representative</td><td data-value="-22133780420">19 Apr 1969</td><td>
                <div class="switch switch-mini">
                    <input type="checkbox">
                </div>
            </td></tr>
        <tr><td>Easer</td><td>Dragoo</td><td>Drywall Stripper</td><td data-value="250833505574">13 Dec 1977</td><td>
                <div class="switch switch-mini">
                    <input type="checkbox">
                </div>
            </td></tr>
        <tr><td>Maple</td><td>Halladay</td><td>Aviation Tactical Readiness Officer</td><td data-value="694116650726">30 Dec 1991</td><td>
                <div class="switch switch-mini">
                    <input type="checkbox">
                </div>
            </td></tr>
        <tr><td>Maxine</td><td>Woldt</td><td>Business Services Sales Representative</td><td data-value="561440464855">17 Oct 1987</td><td>
                <div class="switch switch-mini">
                    <input type="checkbox">
                </div>
            </td></tr>
      </tbody>
      <tfoot class="footable-pagination">
        <tr>
          <td colspan="5"><ul id="pagination" class="footable-nav" /></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>
